<template>
  <div>
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />
    <input type="file" hidden ref="file" @change="onFileChange" />
    <van-cell title="头像" is-link class="cell" @click="$refs.file.click()">
      <van-image round width="40" height="40" :src="user.photo" />
    </van-cell>
    <van-cell title="昵称" :value="user.name" is-link @click="isNameShow = true" />
    <van-cell
      title="性别"
      :value="user.gender === 0 ? '男' : '女'"
      is-link
      @click="isGenderShow = true"
    />
    <van-cell title="生日" :value="user.birthday" is-link @click="isBirthdayShow = true" />

    <!-- 弹出层 -->
    <!-- 昵称弹出层 -->
    <van-popup v-model="isNameShow" position="bottom" :style="{ height: '100%' }">
      <UserNamePopup
        @close="isNameShow = false"
        v-model="user.name"
        v-if="isNameShow"
        @name="user.name = $event"
      />
    </van-popup>
    <!-- 性别弹出层 -->
    <van-popup v-model="isGenderShow" position="bottom" :style="{ height: '36%' }">
      <UserGenderPopup
        @close="isGenderShow = false"
        v-model="user.gender"
        v-if="isGenderShow"
        @name="user.gender = $event"
      />
    </van-popup>
    <!-- 生日弹出层 -->
    <van-popup v-model="isBirthdayShow" position="bottom" :style="{ height: '36%' }">
      <UserBirthdayPopup
        @close="isBirthdayShow = false"
        v-model="user.birthday"
        v-if="isBirthdayShow"
        @name="user.birthday = $event"
      />
    </van-popup>
    <!-- 头像弹出层 -->
    <van-popup v-model="isPhotoShow" position="bottom" :style="{ height: '100%' }">
      <UserPhotoPopup :img="img" @close="isPhotoShow = false" @upData-photo="user.photo = $event" />
    </van-popup>
    <!-- /弹出层 -->
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user.js'
import UserNamePopup from '@/components/user-means/components/user-name.vue'
import UserGenderPopup from '@/components/user-means/components/user-gender.vue'
import UserBirthdayPopup from '@/components/user-means/components/user-birthday.vue'
import UserPhotoPopup from '@/components/user-means/components/user-photo.vue'

export default {
  name: 'userMeans',
  data() {
    return {
      user: {}, // 用户资料
      isNameShow: false, // 昵称弹出层状态
      isGenderShow: false, // 性别弹出层状态
      isBirthdayShow: false, // 生日弹出层状态
      isPhotoShow: false, // 头像弹出层状态
      img: null // 预览的图片url路径
    }
  },
  methods: {
    async userProfile() {
      try {
        const { data } = await getUserProfile()
        console.log(data)
        this.user = data.data
      } catch (error) {
        console.log(error)
        this.$toast.fail('用户资料获取失败')
      }
    },
    onFileChange() {
      // 获取文件对象
      const file = this.$refs.file.files[0]
      // 基于文件对象获取blob数据
      const data = window.URL.createObjectURL(file)
      this.img = data

      this.isPhotoShow = true // 显示弹出层

      // input:file 如果每次选了同一个文件,change事件不会清空
      // 解决办法:每次使用完毕,把value清空
      this.$refs.file.value = ''
    }
  },
  created() {
    this.userProfile()
  },
  components: {
    UserNamePopup,
    UserGenderPopup,
    UserBirthdayPopup,
    UserPhotoPopup
  }
}
</script>

<style lang="less" scoped>
.cell {
  align-items: center;
}
.van-popup {
  background-color: #f5f7f9;
}
</style>
